<template>
  <div>
<!-- 
    计算属性
      1，有些属性有逻辑关系，不能用简单变量表示 
      2，性能浪费（缓存）
-->
  </div>
  <h1>圆面积</h1>
  半径：<input type="text" v-model="r">
  读取面积：<button @click="getArea">读取-普通方法</button>
  读取面积：<button @click="getArea2">读取-计算属性</button>
</template>

<script setup>
import { computed, ref } from 'vue';

const r = ref(10);
function getArea(){
  console.log('计算面积');
  console.log(Math.PI*r.value*r.value);
}
//计算属性
const area = computed(()=>{
  console.log('计算属性面积更新');
  return Math.PI*r.value*r.value;
})

function getArea2(){
  // console.log(area,area.value);
  console.log(area.value);
}
</script>

<style lang="scss" scoped>

</style>